<template>
  <div class="main">
    <div class="title">方 案 操 作</div>
    <div class="content">
      <div class="mainContext"></div>
    </div>
    <div class="buttons">
      <button>新 建</button><button>删 除</button><button>另 存 为</button>
    </div>
    <div class="exit">
      <button @click="exit">退 出</button>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter,useRoute } from 'vue-router';
const router=useRouter();
const exit=()=>{
    router.go(-1)
}
</script>
<style scoped lang="less">
.main {
  width: 100%;
  height: 100%;
  background: rgb(250, 250, 250);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .title {
    height: 10%;
    width: 98%;
    text-align: center;
    font-size: 2vw;
    font-weight: 900;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .content {
    height: 70%;
    width: 95%;
    background: rgb(220, 220, 220);
    border-radius: 1vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .buttons {
    height: 10%;
    width: 45%;
    // background: palegreen;
    display: flex;
    align-items: center;
    justify-content: space-around;

    button {
      height: 5.5vh;
      width: 11vw;
      font-size: 1.7vh;
      color: aliceblue;
      background: url(/src/views/index/jumpToView/buttonPhoto/buttonbefore.png)
        no-repeat 32.9% 83.9%;
      background-size: 105vw 95vh;
      border: 0ch;
      cursor: pointer;
      border-radius: 0.5vh;
      margin-left: 3vw;
      margin-bottom: 2vh;
      font-weight: 700;
    }
  }
}
.exit {
  height: 10vh;
  width: 95%;
//   background: red;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  button {
    background: rgb(71, 130, 186);
    width: 8vw;
    height: 5vh;
    color: white;
    border: 0ch;
    border-radius: 0.5vh;
    cursor: pointer;
    font-size: 1vw;
    font-weight: 700;
  }
}
</style>